home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Menus / anylink-drop-down.izs next >
Text File  |  2005-09-02  |  12KB  |  385 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>AnyLink Drop Down Menu
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION> This is an extremely versatile drop down menu script for ordinary links on your page, including image links. It can be activated either onMouseover or onClick. The menu intelligently determines whether the dropped menu is too close to the browser's edge, adjusting its positioning so it's always in view.
  9.  
  10. This script works in all the major DHTML browsers- IE4+, NS6+, and Opera7+. You can specify a valid default URL for each link for other browsers to navigate to. Cool!
  11.  
  12. <!/DESCRIPTION> 
  13.  
  14. <!CATEGORY>drop down menus<!/CATEGORY>
  15.  
  16. <!SCRIPT>
  17. <!-- START OF SCRIPT -->
  18. <!-- Step 1: Insert the following style sheet and script into the <head> section of your page: -->
  19. <style type="text/css">
  20.  
  21. #dropmenudiv{
  22. position:absolute;
  23. border:1px solid black;
  24. border-bottom-width: 0;
  25. font:normal 12px Verdana;
  26. line-height:18px;
  27. z-index:100;
  28. }
  29.  
  30. #dropmenudiv a{
  31. width: 100%;
  32. display: block;
  33. text-indent: 3px;
  34. border-bottom: 1px solid black;
  35. padding: 1px 0;
  36. text-decoration: none;
  37. font-weight: bold;
  38. }
  39.  
  40. #dropmenudiv a:hover{ /*hover background color*/
  41. background-color: yellow;
  42. }
  43.  
  44. </style>
  45.  
  46. <script type="text/javascript">
  47.  
  48. /***********************************************
  49. * AnyLink Drop Down Menu- ⌐ Dynamic Drive (www.dynamicdrive.com)
  50. * This notice MUST stay intact for legal use
  51. * Visit http://www.dynamicdrive.com/ for full source code
  52. ***********************************************/
  53.  
  54. //Contents for menu 1
  55. var menu1=new Array()
  56. menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
  57. menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
  58. menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
  59. menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
  60.  
  61. //Contents for menu 2, and so on
  62. var menu2=new Array()
  63. menu2[0]='<a href="http://cnn.com">CNN</a>'
  64. menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
  65. menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'
  66.         
  67. var menuwidth='165px' //default menu width
  68. var menubgcolor='lightyellow'  //menu bgcolor
  69. var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
  70. var hidemenu_onclick="yes" //hide menu when user clicks within menu?
  71.  
  72. /////No further editting needed
  73.  
  74. var ie4=document.all
  75. var ns6=document.getElementById&&!document.all
  76.  
  77. if (ie4||ns6)
  78. document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
  79.  
  80. function getposOffset(what, offsettype){
  81. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  82. var parentEl=what.offsetParent;
  83. while (parentEl!=null){
  84. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  85. parentEl=parentEl.offsetParent;
  86. }
  87. return totaloffset;
  88. }
  89.  
  90.  
  91. function showhide(obj, e, visible, hidden, menuwidth){
  92. if (ie4||ns6)
  93. dropmenuobj.style.left=dropmenuobj.style.top=-500
  94. if (menuwidth!=""){
  95. dropmenuobj.widthobj=dropmenuobj.style
  96. dropmenuobj.widthobj.width=menuwidth
  97. }
  98. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
  99. obj.visibility=visible
  100. else if (e.type=="click")
  101. obj.visibility=hidden
  102. }
  103.  
  104. function iecompattest(){
  105. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  106. }
  107.  
  108. function clearbrowseredge(obj, whichedge){
  109. var edgeoffset=0
  110. if (whichedge=="rightedge"){
  111. var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
  112. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
  113. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
  114. edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
  115. }
  116. else{
  117. var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
  118. var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
  119. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
  120. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
  121. edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
  122. if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
  123. edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
  124. }
  125. }
  126. return edgeoffset
  127. }
  128.  
  129. function populatemenu(what){
  130. if (ie4||ns6)
  131. dropmenuobj.innerHTML=what.join("")
  132. }
  133.  
  134.  
  135. function dropdownmenu(obj, e, menucontents, menuwidth){
  136. if (window.event) event.cancelBubble=true
  137. else if (e.stopPropagation) e.stopPropagation()
  138. clearhidemenu()
  139. dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
  140. populatemenu(menucontents)
  141.  
  142. if (ie4||ns6){
  143. showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
  144. dropmenuobj.x=getposOffset(obj, "left")
  145. dropmenuobj.y=getposOffset(obj, "top")
  146. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
  147. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
  148. }
  149.  
  150. return clickreturnvalue()
  151. }
  152.  
  153. function clickreturnvalue(){
  154. if (ie4||ns6) return false
  155. else return true
  156. }
  157.  
  158. function contains_ns6(a, b) {
  159. while (b.parentNode)
  160. if ((b = b.parentNode) == a)
  161. return true;
  162. return false;
  163. }
  164.  
  165. function dynamichide(e){
  166. if (ie4&&!dropmenuobj.contains(e.toElement))
  167. delayhidemenu()
  168. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  169. delayhidemenu()
  170. }
  171.  
  172. function hidemenu(e){
  173. if (typeof dropmenuobj!="undefined"){
  174. if (ie4||ns6)
  175. dropmenuobj.style.visibility="hidden"
  176. }
  177. }
  178.  
  179. function delayhidemenu(){
  180. if (ie4||ns6)
  181. delayhide=setTimeout("hidemenu()",disappeardelay)
  182. }
  183.  
  184. function clearhidemenu(){
  185. if (typeof delayhide!="undefined")
  186. clearTimeout(delayhide)
  187. }
  188.  
  189. if (hidemenu_onclick=="yes")
  190. document.onclick=hidemenu
  191.  
  192. </script>
  193. <!-- Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates two links, one with the menu dropping down onMouseover, and the other, onClick: -->
  194. <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |
  195.  
  196. <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)
  197. <!-- END OF SCRIPT -->
  198. <!/SCRIPT>
  199.  
  200. <!PREVIEW>
  201. <!-- START OF SCRIPT -->
  202.  
  203. <!-- Step 1: Insert the following style sheet and script into the <head> section of your page: -->
  204. <style type="text/css">
  205.  
  206. #dropmenudiv{
  207. position:absolute;
  208. border:1px solid black;
  209. border-bottom-width: 0;
  210. font:normal 12px Verdana;
  211. line-height:18px;
  212. z-index:100;
  213. }
  214.  
  215. #dropmenudiv a{
  216. width: 100%;
  217. display: block;
  218. text-indent: 3px;
  219. border-bottom: 1px solid black;
  220. padding: 1px 0;
  221. text-decoration: none;
  222. font-weight: bold;
  223. }
  224.  
  225. #dropmenudiv a:hover{ /*hover background color*/
  226. background-color: yellow;
  227. }
  228.  
  229. </style>
  230.  
  231. <script type="text/javascript">
  232.  
  233. /***********************************************
  234. * AnyLink Drop Down Menu- ⌐ Dynamic Drive (www.dynamicdrive.com)
  235. * This notice MUST stay intact for legal use
  236. * Visit http://www.dynamicdrive.com/ for full source code
  237. ***********************************************/
  238.  
  239. //Contents for menu 1
  240. var menu1=new Array()
  241. menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
  242. menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
  243. menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
  244. menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
  245.  
  246. //Contents for menu 2, and so on
  247. var menu2=new Array()
  248. menu2[0]='<a href="http://cnn.com">CNN</a>'
  249. menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
  250. menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'
  251.         
  252. var menuwidth='165px' //default menu width
  253. var menubgcolor='lightyellow'  //menu bgcolor
  254. var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
  255. var hidemenu_onclick="yes" //hide menu when user clicks within menu?
  256.  
  257. /////No further editting needed
  258.  
  259. var ie4=document.all
  260. var ns6=document.getElementById&&!document.all
  261.  
  262. if (ie4||ns6)
  263. document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
  264.  
  265. function getposOffset(what, offsettype){
  266. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  267. var parentEl=what.offsetParent;
  268. while (parentEl!=null){
  269. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
  270. parentEl=parentEl.offsetParent;
  271. }
  272. return totaloffset;
  273. }
  274.  
  275.  
  276. function showhide(obj, e, visible, hidden, menuwidth){
  277. if (ie4||ns6)
  278. dropmenuobj.style.left=dropmenuobj.style.top=-500
  279. if (menuwidth!=""){
  280. dropmenuobj.widthobj=dropmenuobj.style
  281. dropmenuobj.widthobj.width=menuwidth
  282. }
  283. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
  284. obj.visibility=visible
  285. else if (e.type=="click")
  286. obj.visibility=hidden
  287. }
  288.  
  289. function iecompattest(){
  290. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  291. }
  292.  
  293. function clearbrowseredge(obj, whichedge){
  294. var edgeoffset=0
  295. if (whichedge=="rightedge"){
  296. var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
  297. dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
  298. if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
  299. edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
  300. }
  301. else{
  302. var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
  303. var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
  304. dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
  305. if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
  306. edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
  307. if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
  308. edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
  309. }
  310. }
  311. return edgeoffset
  312. }
  313.  
  314. function populatemenu(what){
  315. if (ie4||ns6)
  316. dropmenuobj.innerHTML=what.join("")
  317. }
  318.  
  319.  
  320. function dropdownmenu(obj, e, menucontents, menuwidth){
  321. if (window.event) event.cancelBubble=true
  322. else if (e.stopPropagation) e.stopPropagation()
  323. clearhidemenu()
  324. dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
  325. populatemenu(menucontents)
  326.  
  327. if (ie4||ns6){
  328. showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
  329. dropmenuobj.x=getposOffset(obj, "left")
  330. dropmenuobj.y=getposOffset(obj, "top")
  331. dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
  332. dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
  333. }
  334.  
  335. return clickreturnvalue()
  336. }
  337.  
  338. function clickreturnvalue(){
  339. if (ie4||ns6) return false
  340. else return true
  341. }
  342.  
  343. function contains_ns6(a, b) {
  344. while (b.parentNode)
  345. if ((b = b.parentNode) == a)
  346. return true;
  347. return false;
  348. }
  349.  
  350. function dynamichide(e){
  351. if (ie4&&!dropmenuobj.contains(e.toElement))
  352. delayhidemenu()
  353. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  354. delayhidemenu()
  355. }
  356.  
  357. function hidemenu(e){
  358. if (typeof dropmenuobj!="undefined"){
  359. if (ie4||ns6)
  360. dropmenuobj.style.visibility="hidden"
  361. }
  362. }
  363.  
  364. function delayhidemenu(){
  365. if (ie4||ns6)
  366. delayhide=setTimeout("hidemenu()",disappeardelay)
  367. }
  368.  
  369. function clearhidemenu(){
  370. if (typeof delayhide!="undefined")
  371. clearTimeout(delayhide)
  372. }
  373.  
  374. if (hidemenu_onclick=="yes")
  375. document.onclick=hidemenu
  376.  
  377. </script>
  378. <!-- Step 2: Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates two links, one with the menu dropping down onMouseover, and the other, onClick: -->
  379. <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> |
  380.  
  381. <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)
  382. <!-- END OF SCRIPT -->
  383. <!/PREVIEW>
  384.  
  385. <!RELATED>NONE<!/RELATED>